<template>
  <div class="container">
    <div class="search-form">
      <el-form :model="formComment" inline label-width="100px">
        <el-form-item label="评论内容">
          <el-input v-model="formComment.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectComment()">查询</el-button>
          <el-button type="primary" @click="selectComment('rest')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table :data="dangqiandata">
        <el-table-column prop="CommentID" label="评论ID" align="center"></el-table-column>
        <el-table-column prop="CommentContent" label="评论内容" align="center"></el-table-column>
        <el-table-column prop="Comment_Date" label="评论时间" :formatter="formatDate" align="center"></el-table-column>
        <el-table-column prop="PostTitle" label="所属博客" align="center"></el-table-column>
        <el-table-column prop="userName" label="评论用户" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="delComment(scope.row.CommentID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="currentPage" :page-size="5" :total="commentList.length" class="pagination"></el-pagination>
    </div>
  </div>
</template>


<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { getCommentListApi, delCommentApi } from '../api/commentApi';
import { ElMessageBox, ElMessage } from 'element-plus';

// 表单数据
const formComment = reactive({
  content: '' // 评论内容
});

// 评论列表数据
const commentList = ref([]);

// 分页相关
const currentPage = ref(1);
const dangqiandata = computed(() => {
  return commentList.value.slice((currentPage.value - 1) * 5, currentPage.value * 5);
});

// 查询评论列表
const selectComment = (rest) => {
  console.log("formComment:", formComment); // 打印 formPost 的值
  if (rest === 'rest') {
    formComment.content = ''; // 重置查询条件
  }
  getCommentListApi(formComment).then(res => {
    if (res.status === 0) {
      commentList.value = res.data; // 更新评论列表
    } else {
      ElMessage({
        type: 'error',
        message: '获取评论列表失败'
      });
    }
  });
};

// 初始化加载评论列表
onMounted(() => {
  selectComment();
});

// 删除评论
const delComment = id => {
  ElMessageBox.confirm('是否要删除这条评论', 'Warning', {
    confirmButtonText: '确定删除',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      delCommentApi(id).then(resp => {
        if (resp.status === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          });
          selectComment(); // 重新加载评论列表
        } else {
          ElMessage({
            type: 'error',
            message: resp.msg || '删除失败'
          });
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      });
    });
};

// 格式化日期
const formatDate = (row, column, cellValue) => {
  if (!cellValue) return '-';
  const date = new Date(cellValue);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

</script>


<style scoped>
.container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-table {
  margin-top: 20px;
}

.el-button {
  margin-right: 10px;
}

.el-dialog {
  border-radius: 8px;
}

.el-tabs {
  margin-top: 20px;
}
</style>